import React, { useState } from 'react';
import { Form, Input, Modal, Radio, DatePicker,Select} from 'antd';
import moment from 'moment'
import SelectDeviceModal from '@/pages/authority/deviceattr/components/selectDeviceModal';

const FormItem = Form.Item;
const { Option } = Select;
interface CreateFormProps {
  modalVisible: boolean;
  onSubmit: (values: API.DeviceLinkageItem,resetForm:()=>void) => void;
  onCancel: () => void;
  getAttrData: (id:number) => API.SysDeviceAttrItem;
  deviceList?:API.DeviceItem[];
}



const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

//数字比较符
var symbolValueEnum=['>','>=','=','<=','<'];
  

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const [formVals] = useState<API.DeviceLinkageRuleItem>({
    useState: 1
  });

  const [form] = Form.useForm();

  const { modalVisible, onSubmit: handleAdd, onCancel,getAttrData,deviceList } = props;
  console.log(deviceList)
  const [selectDeviceModalVisible, handleDeviceModalVisible] = useState<boolean>(false);
  // const [deviceId,setDeviceId] = useState<number>();
  // const [deviceName,setDeviceName] = useState<number>();

  const [selectedKeys,setSelectedKeys] = useState<string>();
  const [selectedNames,setSelectedNames] = useState<string>();
  const [attrList,setAttrList] = useState<API.SysDeviceAttrItem>([]);
  
  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    fieldsValue.ids=selectedKeys;
    handleAdd(fieldsValue,resetForm);
  };

  const resetForm= async () => {
    form.resetFields();
  };
;
  
  return (
    <Modal
      width={640}
      destroyOnClose
      title="新增任务指令"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Form {...formLayout}
        form={form}
        initialValues={formVals}>
      <FormItem
            label="设备"
            rules={[{ required:true, message: '请选择设备' }]}
        >
          <Input placeholder="请选择设备" value={selectedNames}   onClick={() => handleDeviceModalVisible(true)}  />
        </FormItem>
        <FormItem
          label="变量"
          name="attrId"
          rules={[{ required: true}]}
        >
          <Select placeholder="请选择">
            {attrList.map((item) => (
              <Option key={item.attrId+''} value={item.attrId+'' ?? ''}>
                {item.browseName}
              </Option>
            ))}
          </Select>
        </FormItem>
        <FormItem
          label="变量值"
          name="attrValue"
          rules={[ { required:true,message:'请输入变量值'}]}
        
        >
         <Input  placeholder="请输入"   />
        </FormItem>
        {/* <FormItem
          label="状态"
          name="useState"
        >
          <Radio.Group>
            <Radio value={1} >
              启用
            </Radio>
            <Radio value={0}>
             不启用
            </Radio>
          </Radio.Group>
        </FormItem> */}
        <FormItem
          label="通讯指令模板"
          name="message"
        >
          <Input.TextArea rows={2} placeholder="请输入通讯指令模板" />
        </FormItem>
        <FormItem
          label="反馈信息模板"
          name="reserve"
        >
          <Input.TextArea rows={2} placeholder="请输入反馈信息模板" />
        </FormItem>
       
      </Form>
     <SelectDeviceModal
        onSubmit={async (ids,names,typeId) => {
          setSelectedKeys(ids);
          setSelectedNames(names);
          var attrData=[];
          if(ids.length>1){
             attrData= await getAttrData(typeId,null);
          }else{
             attrData= await getAttrData(typeId,ids[0]);
            }
         
        
          setAttrList(attrData);
          handleDeviceModalVisible(false);
          }}
        onCancel={() => handleDeviceModalVisible(false)}
        modalVisible={selectDeviceModalVisible}
        deviceList={deviceList}
        // selectionType={'radio'}
      />
    </Modal>
  );
};



export default CreateForm;
